
import React, { useEffect, useState } from 'react';
import SideMenu from '../../components/sandbox/SideMenu'
import TopHeader from '../../components/sandbox/TopHeader'
import NewsRouter from '../../components/sandbox/NewsRouter'
import { Layout, theme } from 'antd';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css'

const { Content } = Layout;

//外层的壳子
export default function NewsSandBox() {
  NProgress.start()
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  useEffect(()=>{
    NProgress.done()
  })

  return (
    <Layout style={{minHeight:'100vh'}}>
      <SideMenu collapsed={collapsed}></SideMenu>

      <Layout>
        <TopHeader collapsed={collapsed} setCollapsed={(v)=>{setCollapsed(v)}}></TopHeader>

        <Content
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
            overflow:"auto"
          }}
        >
          <NewsRouter></NewsRouter>
        </Content>

      </Layout>
    </Layout>
  )
}
